<script setup lang="ts">
  import HeaderFeeStandards from './Header.vue'
  import TableFeeStandards from './Table.vue'
  import Pagination from '@/components/Pagination/index.vue'
  import { ref } from 'vue'
  import { ElMessageBox } from 'element-plus'
  import {
    useGetFeeStandards,
    useFeeStandardsEnable,
    useFeeStandardsDisable,
    useFeeStandardsDelete,
    useFeeStandardsMobileShow,
    useFeeStandardsMobileHide,
  } from '@/services/pages/order/service-cost-standard'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import infoTip from '@/config/info-tip'

  const {
    feeStandards,
    feeStandardsTotal,
    getFeeStandardsParam,
    getFeeStandardsLoading,
    getFeeStandards,
  } = useGetFeeStandards()
  const { feeStandardsEnable } = useFeeStandardsEnable()
  const { feeStandardsDisable } = useFeeStandardsDisable()
  const { feeStandardsDel } = useFeeStandardsDelete()
  const { feeStandardsMobileShow } = useFeeStandardsMobileShow()
  const { feeStandardsMobileHide } = useFeeStandardsMobileHide()

  defineOptions({
    name: 'FeeStandards',
  })

  // 分页组件实例
  const paginationInstance = ref<InstanceType<typeof Pagination> | null>(null)

  // 收费标准选择列表
  const selecttion = ref<Array<string>>([])

  /**
   * 获取收费标准列表
   * @param {String} val - 关键字
   */
  const handleGetFeeStandards = (val: string) => {
    getFeeStandardsParam.value.name = val
    getList()
  }

  /**
   * 获取列表方法
   */
  const getList = () => {
    if (paginationInstance.value) {
      getFeeStandardsParam.value.page = paginationInstance.value.current
      getFeeStandardsParam.value.limit = paginationInstance.value.size
      getFeeStandards()
    }
  }

  /**
   * 删除单个费用标准
   * @param {Array<string>} feeStandardIds - 费用标准id集合
   */
  const handleDeleteFeeStandard = (feeStandardIds: Array<string>) => {
    selecttion.value = feeStandardIds
    handleMultipleOperate('delete')
  }

  /**
   * 费用标准选择事件
   * @param {Array<string>} feeStandardIds - 收费标准选择列表
   */
  const handleSelectionChange = (feeStandardIds: Array<string>) => {
    selecttion.value = feeStandardIds
  }

  /**
   * 批量操作
   * @param {'enable' | 'disable' | 'delete' | 'mobileShow' | 'mobileHide'} type - 操作类型
   */
  const handleMultipleOperate = (
    type: 'enable' | 'disable' | 'delete' | 'mobileShow' | 'mobileHide',
  ) => {
    if (selecttion.value.length <= 0) {
      HMessageBox.error('至少选择一条收费标准')
      return
    }

    const messageOptions = {
      enable: '启用',
      disable: '禁用',
      delete: '删除',
      mobileShow: '移动端显示',
      mobileHide: '移动端隐藏',
    }

    ElMessageBox({
      type: type === 'delete' ? 'error' : 'warning',
      title: '提示',
      message: `确定${messageOptions[type]}选中的项?`,
      showCancelButton: true,
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      autofocus: false,
      async beforeClose(action, instance, done) {
        if (['close', 'cancel'].includes(action)) {
          done()
        }

        if (action === 'confirm') {
          let res: null | APIResponse = null
          instance.cancelButtonLoading = true
          instance.confirmButtonLoading = true
          switch (type) {
            case 'enable':
              res = await feeStandardsEnable(selecttion.value)
              break
            case 'disable':
              res = await feeStandardsDisable(selecttion.value)
              break
            case 'delete':
              res = await feeStandardsDel(selecttion.value)
              break
            case 'mobileShow':
              res = await feeStandardsMobileShow(selecttion.value)
              break
            case 'mobileHide':
              res = await feeStandardsMobileHide(selecttion.value)
              break
          }
          if (res.code === 20000) {
            const succesOptions = {
              enable: infoTip.order.feeStandards.multipleEnableSuccess,
              disable: infoTip.order.feeStandards.multipleDisableSuccess,
              delete: infoTip.order.feeStandards.multipleDeleteSuccess,
              mobileShow: infoTip.order.feeStandards.multipleMobileShowSuccess,
              mobileHide: infoTip.order.feeStandards.multipleMobileHideSuccess,
            }
            HMessage.success(succesOptions[type])
            done()
            getList()
          } else {
            HMessageBox.error(res.message)
          }
          instance.cancelButtonLoading = false
          instance.confirmButtonLoading = false
        }
      },
    })
  }

  defineExpose({ getList })
</script>

<template>
  <div
    class="service-cost-standards"
    v-loading="getFeeStandardsLoading"
    element-loading-text="加载中..."
  >
    <header-fee-standards
      @multiple-operate="handleMultipleOperate"
      :selecttion="selecttion"
      @get-list="handleGetFeeStandards"
    ></header-fee-standards>
    <table-fee-standards
      @delete-fee-standard="handleDeleteFeeStandard"
      @selection-change="handleSelectionChange"
      :data="feeStandards"
    ></table-fee-standards>
    <div class="pagination">
      <Pagination
        ref="paginationInstance"
        :list_total="feeStandardsTotal"
        @size-change="getList"
        @current-change="getList"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
  .service-cost-standards {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    padding-top: 12px;

    .pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
